<template>
  <div>
    <!--    面包屑+新增按钮+批量删除按钮+搜索框和按钮-->
    <div>
      <div style="height: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">学生管理</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="width: 100%;height: 60px;display: flex;;flex-direction: row;justify-content:space-between">
        <div style="flex: 5;padding: 0px;margin: 0px;line-height:50px">
          <el-button icon="el-icon-plus" style="margin-left: 10px" @click="add">新增</el-button>

          <el-button icon="el-icon-delete" @click="deletes">批量删除</el-button>
        </div>

        <div style="margin-top: 15px;">
          <el-input placeholder="请输入姓名" v-model="name" clearable style="width: 200px"></el-input>
          <el-button @click="onSubmit" icon="el-icon-search"></el-button>
        </div>

      </div>
      <!--        内容展示-->
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            prop="sid"
            label="学号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="120">
          </el-table-column>

          <el-table-column
            prop="phone"
            label="电话号码">
          </el-table-column>
          <el-table-column
            prop="account"
            label="账号">
          </el-table-column>
          <el-table-column
            prop="qq"
            label="QQ">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            width="350px"
            label="操作"
            align="center">
            <template slot-scope="scope">


              <el-button
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(scope.row)"></el-button>

<!--              <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.sid)"></el-button>-->
              <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                style="margin-left: 5px"
                title="您确定删除吗？"
                @confirm="handleDelete(scope.row.sid)"
              >
                <el-button type="danger" size="mini" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--        页面显示-->
      <div class="block" style="">

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </div>
    </div>
    <div>
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="50%"
        >
        <div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="学号" prop="sid">
              <el-input v-model="formLabelAlign.sid"></el-input>
            </el-form-item>


            <el-form-item label="学生姓名" prop="name">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="formLabelAlign.sex">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item label="登录账号" prop="account">
            <el-input v-model="formLabelAlign.account"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="formLabelAlign.password"></el-input>
          </el-form-item>
          <el-form-item label="QQ" prop="qq">
            <el-input v-model="formLabelAlign.qq"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formLabelAlign.email"></el-input>
          </el-form-item>

          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="formLabelAlign.phone"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="id">
            <el-input v-model="formLabelAlign.id"></el-input>
          </el-form-item>

<!--          <el-form-item label="所属班级" prop="cname">-->
<!--            <el-select v-model="formLabelAlign.cname" placeholder="请选择班级">-->
<!--              <el-option label="Java入门到入土" value="Java入门到入土"></el-option>-->
<!--              <el-option label="C++精通到放弃" value="C++精通到放弃"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="save">确 定</el-button>
                    </span>
      </el-dialog>

    </div>
  </div>


</template>


<script>

import ajax from "axios";
import axios from "axios";
import requests from "@/axios/axios";

export default {
  name: "studentManage",
  mounted() {
    this.getTableData();
  },
  data() {
    return {
      name:"",
      sids: [],//批量删除sids
      selectionList:[],

      pageNo: 1,
      total: 0,
      pageSize: 2,

      multipleSelection: [],

      tableData: [],//学生列表
      students: {
        image: "",
        sid: "",
        name: "",
        phone: "",
        account: "",
        qq: "",
        email: ""
      },

      dialogTitle: '',
      dialogVisible: false,
      labelPosition: "right",
      student: [],


      //表单
      formLabelAlign: {
        sid: "",
        name: "",
        sex: "",
        account: "",
        password: "",
        qq: "",
        email: "",
        phone: "",
        id: "",
      }


    };
  },


  methods: {
//多选框
    handleSelectionChange(val) {
      console.log(val)
      this.selectionList=val
    },
    //批量删除
    deletes() {
      this.sids=this.selectionList.map(value=>value.sid)
      console.log("ssss"+this.sids)
      ajax({
        url: "http://localhost:8081/Student/deletes?sids="+this.sids,
        method: "delete",
      }).then(res => {
        if (res.data.code === '0'){
          this.$message.success("批量删除成功")
          this.getTableData();
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },


    //添加
    add() {
      this.dialogVisible = true;
      this.dialogTitle="增加学生"
      this.formLabelAlign = {};
    },
    //确认增加或者修改
    async save() {
      if(this.dialogTitle == "增加学生"){
        let res = await this.$API.addStudent(this.formLabelAlign);
        console.log(res);
        if (res.code == "0"){
          this.$message({
            type: "success",
            message: "增加成功"
          })
        }
        else {
          this.$message({
            type: "error",
            message: "增加失败"
          })
        }
        this.dialogVisible = false;
        this.getTableData();
      } else{
        //  更新
        requests.post("http://localhost:8081/Student/updateStudent",this.formLabelAlign).then(res =>{
          console.log(res)
          if (res.code === '0'){
            this.$message({
              type: "success",
              message: "更新成功"
            })
          }else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.getTableData()//刷新整个列表
          this.dialogVisible = false
        })
      }
    },
    //更改
    handleEdit(row) {
      this.dialogTitle="修改学生信息"
      this.formLabelAlign = JSON.parse(JSON.stringify(row))//深拷贝
      console.log(this.formLabelAlign)
      this.dialogVisible = true
    },


    handleCurrentChange(currentChange) {
      this.pageNo = currentChange;
      this.getTableData();
    },
    handleSizeChange(sizeChange) {
      this.pageSize = sizeChange;
      this.getTableData();
    },
    getTableData() {

      ajax({
        url: "http://localhost:8081/Student/queryAllStudents?pageNum=" + this.pageNo + "&pageSize=" + this.pageSize,
        method: "get"
      }).then(res => {

        this.tableData = res.data.data;
      });
      this.$axios
        .get("http://localhost:8081/Student/numberOfStudents")
        .then(res => {
          this.total = res.data;
        });

    },


    //删除
    async handleDelete(sid) {

      // var sid=this.students[index].sid;
      let res = await this.$API.deleteStudent(sid)
        if (res.code === '0' || res.code === 0){
          this.$message({
            type: "success",
            message: "删除成功"
          })
        }else {
          this.$message.error('删除失败');
        }
        this.getTableData();
    },


    onSubmit() {
      if (this.name){
        console.log(this.name);
        requests.get("Student/queryByName",{params:{name:this.name}}).then(res =>{
          console.log(res.data)
          console.log(this.name)
          this.tableData = res.data;
          this.total = res.data.length
        })
      }else {
        this.getTableData()
      }
      // axios({
      //   url: "http://localhost:8081/Student/queryByName/" + this.name,
      //   method: "get"
      // }).then(res => {
      //
      //   this.tableData = res.data;
      //
      // });
    },
    mounted() {
      this.getTableData();
    }

  }


};

</script>

<style scoped>

</style>